<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">

  <link rel="StyleSheet" href="css/itemcard.css" type="text/css"
        media="screen" />

  <link rel="StyleSheet" href="css/change.css" type="text/css"
        media="screen" />
</head>
<body>
<div>
  <button id="change">换一换</button>
</div>
<div id="item">

  <a th:href="@{itemForm(itemId=EST-24)}" class="cardItem">
    <div class="item_card">
      <div class="item_card_pic">
        <img id="pic1" src="images/wujinxia.jpg"/>
      </div>
      <div class="item_card_content">
        <h4>无尽夏</h4>
        <div class="item_card_description">
          奶油，青提，蜜瓜，铁观音的微苦托起深度
        </div>
      </div>
    </div>
  </a>

  <a th:href="@{itemForm(itemId=EST-7)}" class="cardItem">
    <div class="item_card">
      <div class="item_card_pic">
        <img id="pic2" src="images/maoshanwang.jpg"/>
      </div>
      <div class="item_card_content">
        <h4>猫山王蛋糕</h4>
        <div class="item_card_description">
          榴莲，乳脂奶油，金色果肉，浓郁榴莲口感
        </div>
      </div>
    </div>
  </a>

  <a href="@{itemForm(itemId=EST-4)}" class="cardItem">
    <div class="item_card">
      <div class="item_card_pic">
        <img id="pic3" src="images/blackcube.jpg"/>
      </div>
      <div class="item_card_content">
        <h4>黑方</h4>
        <div class="item_card_description">
          白兰地酒，纯黑巧克力，白兰地的味道，纯黑巧克力的香醇
        </div>
      </div>
    </div>
  </a>

  <a href="@{itemForm(itemId=EST-23)}" class="cardItem">
    <div class="item_card">
      <div class="item_card_pic">
        <img id="pic4" src="images/shuiniCAKE.jpg"/>
      </div>
      <div class="item_card_content">
        <h4>水泥蛋糕</h4>
        <div class="item_card_description">
          黑芝麻，口感细腻丝滑
        </div>
      </div>
    </div>
  </a>

  <a href="@{itemForm(itemId=EST-5)}" class="cardItem">
    <div class="item_card">
      <div class="item_card_pic">
        <img id="pic5" src="images/orange.jpg"/>
      </div>
      <div class="item_card_content">
        <h4>橘与橙</h4>
        <div class="item_card_description">
          奶油，卡曼橘，包含不同柑橘元素，7个风味层次
        </div>
      </div>
    </div>
  </a>

  <a href="@{itemForm(itemId=EST-3)}" class="cardItem">
    <div class="item_card">
      <div class="item_card_pic">
        <img id="pic6" src="images/black.jpg"/>
      </div>
      <div class="item_card_content">
        <h4>布莱克</h4>
        <div class="item_card_description">
          榛子酱，黑巧克力，黑巧克力和中国榛子
        </div>
      </div>
    </div>
  </a>

  <a href="@{itemForm(itemId=EST-8)}" class="cardItem">
    <div class="item_card">
      <div class="item_card_pic">
        <img id="pic7" src="images/jinzhi.jpg"/>
      </div>
      <div class="item_card_content">
        <h4>金枝</h4>
        <div class="item_card_description">
          奶油，树莓，柚子，稀有水果风味
        </div>
      </div>
    </div>
  </a>

  <a href="@{itemForm(itemId=EST-9)}" class="cardItem">
    <div class="item_card">
      <div class="item_card_pic">
        <img id="pic8" src="images/songren.jpg"/>
      </div>
      <div class="item_card_content">
        <h4>松仁淡奶</h4>
        <div class="item_card_description">
          大兴安岭松仁，松子的香气
        </div>
      </div>
    </div>
  </a>

  <a href="@{itemForm(itemId=EST-26)}" class="cardItem">
    <div class="item_card">
      <div class="item_card_pic">
        <img id="pic9" src="images/molihua.jpg"/>
      </div>
      <div class="item_card_content">
        <h4>茉莉花</h4>
        <div class="item_card_description">
          奶油，茉莉花，蜜瓜，茉莉花浸的奶油
        </div>
      </div>
    </div>
  </a>
</div>

<script>
  $(function () {
    function randomNums(n, min, max) {
      var arr = [];
      for (var i = 0; i < n; i++) {
        var ran = Math.ceil(Math.random() * (max - min) + min);
        while (isExist(arr, ran)) {
          ran = Math.ceil(Math.random() * (max - min) + min);
        }
        arr[i] = ran;
      }
      return arr;
    }

    function isExist(arr, ran) {
      for (var i = 0; i < arr.length; i++) {
        if (arr[i] == ran) {
          return true;
        }
      }
      return false;
    }

    $('.cardItem').hide();
    var arr = randomNums(3,0,9);
    var x = 1;
    $('.cardItem').each(function (){
      if(isExist(arr, x)){
        $(this).show();
      }
      x++;
    })

    $('#change').on('click',function (){
      $('.cardItem').hide();
      arr = randomNums(3,0,9);
      x = 1;
      $('.cardItem').each(function (){
        if(isExist(arr, x)){
          $(this).show();
        }
        x++;
      })
    })

  });
</script>
</body>
</html>